<template>

  <el-row :gutter="20" justify="center" style="padding:10px 10px" type="flex">

    <el-col :span="20" justify="center" type="flex">

      <el-row :gutter="15" justify="center" style="padding:10px 10px" type="flex">

        <el-col :span="2">
          <el-button type="primary" v-on:click="jumpToHome">首页</el-button>
        </el-col>

        <el-col :span="18">
          <el-input v-model="body.title" v-bind:placeholder="placeholder"></el-input>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" v-on:click="addBlogByClick">提交文字</el-button>
        </el-col>

        <el-col :span="2">
          <el-button type="primary">个人中心</el-button>
        </el-col>

      </el-row>

      <el-row :gutter="20" justify="center" style="padding:10px 10px" type="flex">
        <el-col><h2 v-model="body.title" style="text-align : center" v-bind:placeholder="placeholder">{{ body.title }}</h2>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <mavon-editor
            v-model="body.content"
            :toolbars="markdownOption"
            style="height: 700px"

            />
      </el-row>

    </el-col>
  </el-row>
</template>

<script>
import {postBlogApi, getBlogApi} from "../../api/blogApi";
import {ECode} from "../../utils/commonUtil"

export default {
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      },
      placeholder: "请输入标题",
      body: {
        blogUid: null,
        title: "",
        summary: null,
        content: null,
        tag_uid: null,
        click_count: null,
        collect_count: null,
        file_uid: null,
        status: 1,
        is_original: "1",
        author: null,
        articles_part: null,
        blog_sort_uid: null,
        is_publist: "1",
        sort: 1,
        outside_link: null,
        userUid: this.userUid,
        article_source: 1
      }

    };
  },

  created() {

  },

  mounted(){
    this.getBlog()
  },
  watch: {
    '$route': 'getBlog'
  },
  methods: {
    jumpToHome: function () {
      this.$router.push('/blogs')
    },

    getBlog: function () {
      this.body.blogUid =  this.$route.params.uid;
      if(isNaN(parseInt(this.body.blogUid))){
        this.$message('没有 blogUid');
      }else {
        getBlogApi(this.body.blogUid).then(response => {
          if (response.code === ECode.SUCCESS ) {

            if(response.data !== undefined){
              this.body.title = response.data.title;
              this.body.content = response.data.content;

            }else {
              this.body.title = "";
              this.body.content = "";
              this.$message('无效的 blogUid');
            }
          }
        });
      }

    },

    addBlogByClick: function () {
      postBlogApi(this.body).then(response => {
        this.$message('提交成功');
        // this.jumpToEdit(this.body.blogUid)
      });
    },

    jumpToEdit(blogUid) {
      console.log(blogUid)
      this.$router.push("/edit/" + blogUid)
    }
    ,
  }
};
</script>

<style scoped>

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
